<template>
	<view>
		<view class="box" v-for="item in infoList" :key="item.id" @click="goInfoDetail(item.id)">
			<image :src="item.img_url"></image>
			<view class="text">
				<view>
					<text>{{item.title}}</text>
				</view>
				<view>
					<text>发表时间：{{item.add_time | showDate}}&nbsp;&nbsp;&nbsp;&nbsp;浏览次数：{{item.click}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'info',
		data(){
			return{
				infoList:[]
			}
		},
		onLoad(){
			this.getInfoList()
		},
		methods:{
			async getInfoList(){
				const res = await this.$myRequest({
					url:'/api/getnewslist'
				})
				console.log(res.data.message)
				this.infoList = res.data.message
			},
			// 跳转资讯详情页面
			goInfoDetail(id){
				uni.navigateTo({
					url:`/pages/infoDetail/infoDetail?id=${id}`
				})
			}
		},
		filters:{
			// 过滤器，处理服务器时间
			showDate(date){
				const nDate = new Date(date)
				const year = nDate.getFullYear()
				const month = nDate.getMonth().toString().padStart(2,0) //padStart方法控制月和日能保持两位数
				const day = nDate.getDay().toString().padStart(2,0)
				return year + '-' + month + '-' + day
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		box-sizing: border-box;
		padding: 10rpx;
		width: 750rpx;
		height: 200rpx;
		border-bottom: 1px solid #b50e03;
		display: flex;
		image{
			width: 200rpx;
			height: 180rpx;
		}
		.text{
			width: 500rpx;
			padding: 10rpx;
			view:nth-child(1){
				font-size: 28rpx;
				margin: 10rpx 0 30rpx;
			}
			view:nth-child(2){
				font-size: 24rpx;
			}
		}
	}
</style>
